<template>
  <div>
    <div id="bottomLeftChart" style="width:100%;height:6.125rem;"></div>
  </div>
</template>

<script>
import echartMixins from '@/utils/resizeMixins'
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('screen')
export default {
  data () {
    return {

    }
  },
  mixins: [echartMixins],
  mounted () {
    this.makeSource()
    this.draw()
  },
  computed: {
    ...mapState(['operatorScreenData'])
  },
  watch: {
    'operatorScreenData.everymonthyeardata': {
      deep: true,
      handler () {
        this.makeSource()
        this._chart.setOption({
          dataset: {
            source: _.cloneDeep(this.source)
          }
        })
      }
    }
  },
  methods: {
    makeSource () {
      const datalist = this.operatorScreenData.everymonthyeardata
      const dimensions = _.flatten(datalist.map(d => _.keys(d)))
      const source = []
      datalist.forEach((list, k) => {
        const data = list[dimensions[k]]
        data.forEach((d, i) => {
          if (k === 0) {
            const item = []
            item.push(d.amonth, d.elec)
            source.push(item)
          } else {
            source[i].push(d.elec)
          }
        })
      })
      source.unshift(['time'].concat(dimensions))
      this.source = source

      // const source = []
      // _.forEach(this.screendata.last30rate, (v, k) => {
      //   const item = []
      //   item.push(v.atime, v.utilizationrate)
      //   source.push(item)
      // })
      // this.source = source
    },
    draw () {
      // 基于准备好的dom，初始化echarts实例
      this._chart = this.$echarts.init(document.getElementById('bottomLeftChart'))
      //  ----------------------------------------------------------------
      // 颜色设置
      const color = {
        linearYtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#f5b44d'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#43dfa2'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        linearBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#1c98e8'
            },
            {
              offset: 1,
              color: '#28f8de'
            }
          ]
        },
        areaBtoG: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(156,136,24)'
            },
            {
              offset: 1,
              color: 'rgb(14,27,36)'
            }
          ]
        },
        areaGtoB: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: 'rgb(2,149,169)'
            },
            {
              offset: 1,
              color: 'rgb(4,22,42)'
            }
          ]
        }
      }
      const option = {
        title: {
          text: '',
          textStyle: {
            color: '#D3D6DD',
            fontSize: 24,
            fontWeight: 'normal'
          },
          x: 'center',
          y: 0
        },
        legend: {
          show: true,
          // top: 120,
          // left: 80,
          // orient: 'vertical',
          // itemGap: 15,
          // itemWidth: 12,
          // itemHeight: 12,
          // data: ['平均指标', '我的指标'],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '0%'
        },
        tooltip: {
          trigger: 'axis',
          // formatter: function (params) {
          //   let res = '<div><p>'  + params[0].name + '</p></div>'
          //   for (let i = 0; i < params.length; i++) {
          //     if (params[i].data != undefined) {
          //       res +=
          //         '<p>' + params[i].marker  + params[i].seriesName + ':' + params[i].data[i+1].toFixed(2) + '%' + '</p>'
          //     }
          //   }
          //   return res
          // }
        },
        grid: {
          width: '85%',
          top: 30,
          bottom: 40
        },
        xAxis: {
          type: 'category',
          position: 'bottom',
          axisLine: true,
          axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12
          }
        },
        // 下方Y轴
        yAxis: {
          nameLocation: 'end',
          nameGap: 24,
          nameTextStyle: {
            color: 'rgba(255,255,255,.5)',
            fontSize: 14
          },

          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1
            }
          },
          axisLabel: {
            color: 'rgba(255,255,255,.8)',
            fontSize: 12
          }
        },
        series: [
          {
            name: this.$t('cVPb-wG-LATsF4vI-L4Wi'),
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 2,
            // stack: '1',
            itemStyle: {
              normal: {
                color: 'rgb(156,136,24)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgb(156,136,24)',
                width: 2
              }
            },
            // areaStyle: {
            //   normal: {
            //     color: color.areaBtoG
            //   }
            // },
            lineSmooth: true
          },
          {
            name: this.$t('GKG75H7uePII0Nx0-cJ77'),
            type: 'line',
            smooth: true,
            // stack: '1',
            symbol: 'circle',
            symbolSize: 2,
            itemStyle: {
              normal: {
                color: 'rgb(2,149,169)'
              }
            },
            lineStyle: {
              normal: {
                color: 'rgb(2,149,169)',
                width: 2
              }
            },
            // areaStyle: {
            //   normal: {
            //     color: color.areaGtoB
            //   }
            // },
            lineSmooth: true
          }
        ],
        dataset: {
          source: _.cloneDeep(this.source)
        }
      }

      this._chart.setOption(option)
    }
  },
  destroyed () {
    window.onresize = null
  }
}
</script>

<style lang="scss" scoped>

</style>
